<template>
  <div class="top" style="display: flex;align-items: center;">
    <p class="left"
      style="width: 8px;height: 25px;background-color: hsl(37, 83%, 79%);margin-right: 10px;border-radius: 3px;"></p>
    <p style="color: white;font-size: 22px;font-weight: 600;">{{ $t('个人资料') }}</p>
  </div>


  <div class="box1" style="margin-top: 20px;" @click="goToEditProfile">
    <p
      style="max-width: 100%; height: 30px; background-color: #f6d39c; display: inline-block; padding-left: 5px; padding-right: 5px;padding-top: 5px; border-radius: 5px;">
      <el-icon style="font-size: 16px; margin-right: 5px;">
        <Edit />
      </el-icon>
      <span>{{ $t('编辑个人资料') }}</span>
    </p>
    <p style="color: gray; margin-top: 3px;">{{ $t('为了账户安全，请您保管好个人资料') }}</p>
  </div>




  <div class="box2"
    style="margin-top: 20px; width: 100%;height: 500px; display: flex;justify-content: space-around;padding-left: 80px;padding-right: 80px;box-sizing: border-box;">
    <div class="left" style="width: 530px;">
      <div style="display: flex;">
        <p style="width: 200px;text-align: right;color: white;font-weight: 600;">{{ $t('姓名') }}：</p>
        <p style="margin-left: 18px;color: white;">{{ realName.name }}</p>
      </div>
      <!-- <div style="display: flex;margin-top: 35px;">
                <p style="width: 100px;text-align: right;color: white;font-weight: 600;">国籍：</p>
                <p style="margin-left: 18px;color: white;">{{ realName.sex }}</p>
            </div> -->
      <div style="display: flex;margin-top: 35px;">
        <p style="width: 200px;text-align: right;color: white;font-weight: 600;">{{ $t('证件号码') }}：</p>
        <p style="margin-left: 18px;color: white;">{{ realName.cardno }}</p>
      </div>
      <div style="display: flex;margin-top: 35px;">
        <p style="width: 250px;text-align: right;color: white;font-weight: 600;">{{ $t('身份证正面') }}：</p>
        <p
          style="margin-left: 18px;color: white;width:400px;min-height: 150px; background-color: black;overflow: hidden;margin-bottom: 100px;">
          <img style="width: 400px;" :src="realName.zimage_url" alt="">
        </p>
      </div>
    </div>
    <div class="right" style="width: 530px;">
      <div style="display: flex;">
        <p style="width: 200px;text-align: right;color: white;font-weight: 600;">{{ $t('性别') }}：</p>
        <p style="margin-left: 18px;color: white;">{{ $t(realName.sex === 1 ? '男' : (realName.sex === 2 ? '女' : '未知')) }}
        </p>
      </div>
      <!--  <div style="display: flex;margin-top: 35px;">
                <p style="width: 100px;text-align: right;color: white;font-weight: 600;">地址：</p>
                <p style="margin-left: 18px;color: white;">United Arab Emirates</p>
            </div> -->
      <div style="display: flex;margin-top: 35px;">
        <p style="width: 200px;text-align: right;color: white;font-weight: 600;">{{ $t('手机号码') }}：</p>
        <p style="margin-left: 18px;color: white;">{{ userInfo.phone }}</p>
      </div>
      <div style="display: flex;margin-top: 35px;">
        <p style="width: 250px;text-align: right;color: white;font-weight: 600;">{{ $t('身份证反面') }}：</p>
        <p
          style="margin-left: 18px;color: white;width:400px ;min-height: 150px; background-color: black;overflow: hidden;">
          <img style="width: 400px;" :src="realName.fimage_url" alt="">
        </p>
      </div>
    </div>
  </div>
</template>
  
<script>
import { HomeFilled, Promotion, Pointer, Edit } from "@element-plus/icons-vue";
import { UserInfoApi, realNameApi } from "@/api/index";
export default {
  name: 'DashBoard',
  data() {
    return {
      userInfo: {},
      realName: {}
    };
  },
  methods: {
    goToEditProfile() {
      // 使用 window.location.href 进行跳转
      this.$router.push('/editor');
    },
    getUserInfo() {
      // 从localStorage中获取token
      const storedToken = localStorage.getItem('token');
      if (storedToken) {
        const params = {
          token: storedToken
        };
        UserInfoApi(params).then(res => {
          this.userInfo = res.data
          console.log(this.userInfo)
        });
      }
    },
    getrealName() {
      // 从localStorage中获取token
      const storedToken = localStorage.getItem('token');
      if (storedToken) {
        const params = {
          token: storedToken
        };
        realNameApi(params).then(res => {
          this.realName = res.data
          console.log(this.realName)
        });
      }
    }
  },
  created() {
    this.getUserInfo()
    this.getrealName()
  },
  components: {}
}
</script>
  
<style lang="scss" scoped>
:deep(.el-progress-bar__outer) {
  background-color: rgba(255, 255, 255, 0.4);
  /* lightgray, but transparent */

}

/* 进度条颜色 我需要的是渐变色 */
:deep(.el-progress-bar__inner) {
  background-color: white;
  //background: linear-gradient(90deg, #FEC015 0%, #FE8B25 100%);
}

.box1:hover {
  cursor: pointer
}

.custom-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  //gap: 10px;

  color: white;
}

.topbox {
  width: 100%;
  height: 21px;
  display: flex;
  font-size: 13px;

  // justify-content: space-around;
  .small {
    width: 152px;
    // background-color: pink;
  }

  .small2 {
    width: 152px;
    // background-color: pink;
  }
}

.chart-wrapper {
  width: 100%;
  /* 确保内部图表容器充满el-col */
}

.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  /*   .github-corner {
      position: absolute;
      top: 0px;
      border: 0;
      right: 0;
    } */

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}</style>
  